<template>
	<view>
		<view class="index_info">
			<!-- banner Start -->
			<view class="swiper-back">
				<banner :swiperImg="swiperImg"></banner>
			</view>
			<!-- banner End -->
			<!-- 公告栏 Start -->
			<view class="jn-com-part" style="margin-top: 30rpx;" v-if="notifys.length>0">
				<uniNoticeBar scrollable="true" single="true" :text="notifys[0].F_Title" showIcon=true></uniNoticeBar>
			</view>
			<!-- 公告栏 End -->
			<scroll-view id="scrollview" scroll-y="true" :scroll-with-animation="true" scroll-top="0">
				<view class="uni-grid" v-if="menuData.length>0">
					<view class="grid-9 jn-com-part" v-for="(items,key) in menuData" :key="key">
						<view class="jn-com-main">
							<view class="common">
								<text>
									{{items.fullName}}
								</text>
							</view>
							<view class="uni-grid-9 padding-bottom30">
								<view class="uni-grid-9-item" hover-class="uni-grid-9-item-hover"
									v-for="(children,index) in items.childrenMenu" :key="index"
									@click="deRoute(children)">
									<view class="uni-grid-9-ico"
										:style="{'background':children.iconBackground|| '#008cff'}">
										<view class="icon-box-lin">
											<label class="font-size60" :class="children.icon" style="color: #FFFFFF;" />
										</view>
									</view>
									<text class="uni-grid-9-text"
										:class="children.fullName.length>5?'overflow-text':''">{{children.fullName}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="jn-com-part">
					<view class="jn-com-main">
						<view class="common">
							<view><text>最新资讯</text></view>
						</view>
						<view class="background-colorFFF  margin-bottom-10" v-if="newNeeds.length>0  ">
							<view class="signcontract " :class="{'signcontracts':index!=newNeeds.length-1}"
								v-for="(item,index) in newNeeds" :key="index">
								<view class="sign_text"><text class="ladot"></text><text>{{item.F_Title}}</text></view>
								<view class="sign_date"> {{item.F_UploadDate.split(" ")[0]}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-modal v-model="showFollow" title="关注提醒">
			<view class="slot-content">
				<view class="code-images">
					<image src="/static/qrcode_qygj.jpg"></image>
				</view>
				<view>关注九士数字管家服务号，获取最新通知</view>
			</view>
		</u-modal>
		<!-- <f-tabbar></f-tabbar> -->
	</view>
</template>

<script>
	// import fTabbar from '@/components/f-tabbar/f-tabbar.vue'
	import uCharts from '@/components/u-charts/u-charts.js'
	import helper from '@/common/js/helper.js'
	import baseui from '@/common/js/base-ui.js'
	import config from '@/common/js/config.js'
	import wPicker from '@/components/w-picker/w-picker.vue'
	import banner from './banner/banner.vue'
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'

	let _self;
	let canvasObj = null;
	/* 图表数据 */
	let Data = {
		"LineA": {
			"categories": ["2012", "2013", "2014", "2015", "2016", "2017"],
			"series": [{
				"name": "成交量A",
				"data": [35, 8, 25, 37, 4, 20]
			}, {
				"name": "成交量B",
				"data": [70, 40, 65, 100, 44, 68]
			}, {
				"name": "成交量C",
				"data": [100, 80, 95, 150, 112, 132]
			}]
		},
	}
	export default {
		components: {
			wPicker,
			banner,
			uniNoticeBar
		},
		data() {
			return {
				userinfo: {},

				notifys: [],
				newNeeds: [],
				comflow: [],
				showDatal: false,
				timeStamp: 0,
				demandlist: [],

				contime: 0,
				currentb: 0,

				serverData: '',
				hideTem: false,
				/* bannerData */
				swiperImg: [],
				badge: 0,
				flag: true,
				timeout: 3000,
				timeObj: '',
				serverTimeObj: '',
				socket: null,

				menuData: [],
				items: [],
				number: 0,
				isData: false,
				nodata: config.Resources.message.nodata,
				showFollow: false
			}
		},
		onLoad() {

			_self = this;
			try {
				_self.provider();

				setTimeout(function() {
					_self.badge = uni.getStorageSync(config.Global.cache + '_Badge');
					_self.tabBarBadge(_self.badge)
				}, 500);
			} catch (e) {}

			if (!this.$store.state.wschat.socketState) {
				helper.webSocket();
				// this.appIM();
			}


			const userProvider = uni.getStorageSync(config.Global.cache + '_UserProvider');;
			if (userProvider) {
				this.userinfo = userProvider
			}
		},

		onReady() {
			if (this.userinfo.OpenId == '' || this.userinfo.IsFollow == false) {
				this.showFollow = true
			}
		},

		mounted() {
			uni.showLoading({
				title: "加载配置中"
			})
			this.initData();
			this.$nextTick(function() {
				setTimeout(() => {
					this.loadBanner()
					uni.hideLoading()
				}, 2500);
			})
		},
		onShow() {
			this.refreshNews()
		},
		methods: {
			refreshNews() {
				helper.ajax({
					url: '/api/DataInterface/8e660880594d489984a12aa6418af477/Actions/Response',
					method: 'GET',
					success: res => {
						this.notifys = res.data.data;
					}
				});
				// 
				helper.ajax({
					url: '/api/DataInterface/78ca81bc09ae422889caefdc59890e00/Actions/Response',
					method: 'GET',
					success: res => {
						this.newNeeds = res.data.data;
					}
				});
				this.loadAppMenu()
			},
			loadAppMenu() {
				try {
					helper.ajax({
						url: '/api/App/Common/Login/App/MenuList',
						method: 'GET',
						success: res => {
							let applyMenu = res.data.data
							let newApplyMenu = []
							for (var i = 0; i < applyMenu.length; i++) {

								let childrenMenu = []
								if (applyMenu[i].ChildModule.length > 0) {
									let tempChildren = applyMenu[i].ChildModule
									for (var j = 0; j < tempChildren.length; j++) {
										childrenMenu.push({
											id: tempChildren[j].Id,
											icon: tempChildren[j].Icon,
											fullName: tempChildren[j].FullName,
											urlAddress: tempChildren[j].UrlAddress,
											iconBackground: JSON.parse(tempChildren[j].PropertyJson)
												.iconBackgroundColor
										});
									}
								}
								newApplyMenu.push({
									id: applyMenu[i].Id,
									icon: applyMenu[i].Icon,
									fullName: applyMenu[i].FullName,
									iconBackground: JSON.parse(applyMenu[i].PropertyJson)
										.iconBackgroundColor,
									childrenMenu: childrenMenu
								});
							}
							this.menuData = newApplyMenu
						}
					});

				} catch (e) {}

			},
			loadBanner() {
				try {
					const bannerList = uni.getStorageSync(config.Global.cache + '_BannerList');

					if (bannerList == '') {
						return;
					}

					this.swiperImg = bannerList

				} catch (e) {}


			},
			initData() {
				const apiKey = uni.getStorageSync('apiKey') || 'api';
				const baseUrlObj = config.Global.baseUrl;
				const baseUrl = config.Global.baseUrl[apiKey].apiUrl;
				try {
					const bannerList = uni.getStorageSync(config.Global.cache + '_BannerList');
					if (!bannerList) {
						helper.ajax({
							url: "/api/DataInterface/484dee97ae3e4e2b99e5f2148b7d8a32/Actions/Response",
							success: function(res) {
								let bannerList = res.data.data
								let tempImages = bannerList.map(item => {
									return {
										homeUrl: `${baseUrl}${JSON.parse(item.F_ThumbUrl)[0].url}`
									}
								})
								uni.setStorage({
									key: config.Global.cache + '_BannerList',
									data: tempImages
								});
							}
						});
					}

					const dictionaryList = uni.getStorageSync(config.Global.cache + '_DictionaryList');
					if (!dictionaryList) {
						helper.ajax({
							url: "/api/System/DictionaryData/All",
							success: function(res) {

								uni.setStorage({
									key: config.Global.cache + '_DictionaryList',
									data: res.data.data.list
								});
							}
						});
					}
					/* 消息页通讯录请求 */
					const userList = uni.getStorageSync(config.Global.cache + '_UserList');
					if (!userList) {
						helper.ajax({
							url: "/api/Permission/Users/All",
							success: function(res) {
								uni.setStorage({
									key: config.Global.cache + '_UserList',
									data: res.data.data.list
								});
							},
						});
					}

					const roleList = uni.getStorageSync(config.Global.cache + '_RoleList');
					if (!roleList) {
						helper.ajax({
							url: "/api/Permission/Role",
							success: function(res) {
								let _data = {};
								const roleList = res.data.data.list
								for (let i = 0; i < roleList.length; i++) {
									_data[roleList[i].F_Id] = {
										'F_EnCode': roleList[i].enCode,
										'F_FullName': roleList[i].fullName
									};
								};
								uni.setStorage({
									key: config.Global.cache + '_RoleList',
									data: _data
								});
							}
						});
					}
					const positionList = uni.getStorageSync(config.Global.cache + '_PositionList');
					if (!positionList) {
						helper.ajax({
							url: "/api/Permission/Position/All",
							success: function(res) {
								if (res.data.code == '200') {
									let _data = {};
									const positionList = res.data.data.list;
									for (let i = 0; i < positionList.length; i++) {
										_data[positionList[i].F_Id] = {
											'F_EnCode': positionList[i].enCode,
											'F_FullName': positionList[i].fullName,
											'F_OrganizeId': positionList[i].organizeId
										};
									};
									uni.setStorage({
										key: config.Global.cache + '_PositionList',
										data: _data
									});
								}
							}
						});
					}
					const organizeList = uni.getStorageSync(config.Global.cache + '_OrganizeList');
					if (!organizeList) {
						helper.ajax({
							url: "/api/Permission/Organize",
							success: function(res) {
								// // console.log(res)
								if (res.data.code == '200') {
									let _data = {};
									const organizeList = res.data.data.list;
									for (let i = 0; i < organizeList.length; i++) {
										_data[organizeList[i].id] = {
											'F_EnCode': organizeList[i].enCode,
											'F_FullName': organizeList[i].fullName,
											'F_ParentId': organizeList[i].parentId,
											'F_Category': organizeList[i].category
										};
									};
									uni.setStorage({
										key: config.Global.cache + '_OrganizeList',
										data: _data
									});
								}
							}
						});
					}
				} catch (e) {
					//TODO handle the exception

				}
			},


			provider() {
				const userProvider = uni.getStorageSync(config.Global.cache + '_UserProvider');
				if (!userProvider) {
					helper.ajax({
						url: '/api/App/Common/Login/App/CurrentUser',
						success: res => {
							let _data = res.data.data;
							uni.setStorage({
								key: config.Global.cache + '_UserProvider',
								data: _data.userInfo
							});
							uni.setStorage({
								key: config.Global.cache + '_ApplyMenu',
								data: _data.menuList
							});
						},
					});
				}
			},

			bannerChange: function(e) {
				let current = e.detail.current;
				this.currentb = current;
			},
			/* 底部导航徽标 */
			tabBarBadge(badge) {
				// #ifndef MP-ALIPAY
				if (badge > 0) {
					uni.setTabBarBadge({
						index: 1,
						text: badge > 99 ? '99+' : badge.toString(),
					});
				} else {
					uni.removeTabBarBadge({
						index: 1,
					});
				}
				// #endif
			},

			deRoute(e) {
				uni.setStorage({
					key: "title",
					data: e
				})
				setTimeout(function() {
					uni.navigateTo({
						url: e.urlAddress,
						success: function(res) {},
						fail: (err) => {
							helper.msg("暂无此页面")
						}
					})
					uni.hideLoading();
				}, 300);

			},
		},
		onUnload() {
			this.showDatal = false;
		},
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				uni.scanCode({
					success: function(res) {
						// console.log(JSON.stringify(res.result))
					},
					fail(e) {
						// console.log(JSON.stringify(e));
					}
				});
			};
			if (e.index == 1) {
				// console.log("第一个按钮");
			};
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6;
	}

	.slot-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;

		.code-images {
			image {
				width: 560rpx;
				height: 560rpx;
			}
		}
	}

	.cont {
		position: fixed;
		top: 60rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 700rpx;
	}

	swiper {
		height: 300rpx;
		width: 100%;
		margin: 0 auto;
		border-radius: 20rpx;
		css-webkit-appearance: none;
		overflow: hidden;
	}

	/* #ifdef MP-ALIPAY */
	.swiper-image {
		width: 100% !important;
		height: 230upx !important;
	}

	/* #endif */

	.dateData {
		display: flex;
		align-items: center;
		position: relative;
		white-space: nowrap;
		font-size: 32rpx;
	}

	.dataList {
		background: #FFFFFF;
		z-index: 99;
		padding: 20rpx 40rpx 0 40rpx;
		box-shadow: 0 0 16rpx #9A9A9A;
		position: absolute;
		top: 66rpx;
		right: 0rpx;
	}

	.dataList::after {
		content: "";
		position: absolute;
		top: -34rpx;
		left: 80rpx;
		height: 0;
		width: 0;
		border: 20rpx solid;
		border-color: transparent transparent white transparent;
	}

	.dataitem {
		white-space: nowrap;
		margin-bottom: 20rpx;
		font-size: 32rpx;
	}

	.swiper-back {
		background: #3281FF !important;
		/* background: linear-gradient(to bottom, #4869EE 70%, #f0f2f6 30%) !important; */
		position: relative;
		height: calc(50rpx + 88rpx);
		margin-bottom: 120upx;
		/* #ifdef MP-WEIXIN */
		margin-bottom: 140upx;
		/* #endif */
	}

	swiper-item {
		display: flex;
		align-items: center;
		border-radius: 20upx;
		overflow: hidden;
	}

	.swiper-banner image {
		width: 100%;
		height: 100%;
	}

	.bannerDots {
		width: 80rpx;
		height: 16rpx;
		display: flex;
		position: absolute;
		bottom: -80rpx;
		left: 50%;
		transform: translate(-50%);
		align-items: center;
		justify-content: space-between;
	}

	.bannerDots .banner-dot {
		width: 10rpx;
		height: 10rpx;
		border-radius: 5rpx;
		background: #fff;
	}

	.bannerDots .banner-dot.active {
		width: 26rpx;
		height: 10rpx;
		background: #a7dafa;
	}

	.proclamation {
		width: 100%;
		overflow: hidden;
		margin-top: 20rpx;
		background-color: #FFFFFF;
	}

	.proclamation-hint {
		width: 95%;
		height: 70rpx;
		display: flex;
		align-items: center;
		padding-left: 20upx;
		flex-wrap: nowrap;
	}

	.proclamation-hint .iconfont {
		font-size: 44rpx !important;
		margin-left: 8rpx;
	}

	.proclamation-center {
		width: 83%;
		padding-left: 20upx;
		font-size: 24upx;
		color: #9A9A9A;
	}

	.proclamation-right {
		padding-left: 7upx;
		width: 7%;
	}

	.uni-grid-6 {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		background-color: #FFFFFF;
		color: #555555;
		padding-bottom: 20rpx;
		padding-top: 20rpx;
	}

	.uni-grid-6-item {
		width: 33.3%;
		display: flex;
		margin-bottom: 15rpx;
		margin-top: 15rpx;
		align-items: center;
		justify-content: center;
		text-align: center;
		box-sizing: border-box;
		/* border-top: 1upx solid #E6E6E6; */
		line-height: 52upx;
	}

	.uni-grid-7-item {
		padding: 20rpx 0;
		width: 50%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-left: 40rpx;
	}

	.item7-num {
		font-size: 24rpx;
		color: #949ebc;
	}

	.item7-num>text {
		font-size: 32rpx;
		color: #252B3A;
		font-weight: 600;
	}

	.item7-intro {
		font-size: 24rpx;
		color: #999999;
	}

	.item7-icon {
		margin: 0 25rpx 0 25rpx;
		color: #ffffff;
		font-size: 38rpx;
		width: 66upx;
		margin-right: 30rpx;
		height: 66upx;
		background-color: #3281FF;
		text-align: center;
		line-height: 66upx;
		border-radius: 50%;
	}

	.uni-grid-6-text {
		width: 50%;
		display: flex;
		flex-direction: column;
		margin: 5upx 0;
	}

	.signcontract {
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		line-height: 80rpx;
		color: #555555;
		position: relative;
	}

	.signcontracts::after {
		content: "";
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		width: 120%;
		left: 0;
		height: 1px;
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.sign_text {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.sign_text text:last-child {
		display: block;
		max-width: 430rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.swiper-notify {
		height: 56upx;
		width: 100%;
		overflow: hidden;
	}

	.sign_date {
		line-height: 80rpx;
	}

	.common text {
		vertical-align: middle;
		font-size: 36upx;
		font-weight: 500;
		color: #3a3a3a;
	}

	.common::after {
		content: "";
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		left: 0px;
		height: 0px;
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	/* 图标通用样式 */
	.qiun-charts {
		width: 100%;
		height: 500upx;
		/* padding: 16rpx 0; */
		background-color: #FFFFFF;
	}

	.charts {
		width: 99%;
		height: 500upx;
		margin: 0 auto;
		background-color: #FFFFFF;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}

	.overflow-notice {
		width: 90%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>